﻿@using Colorful.Models;
@model LinkModel
@{ 
    bool showPhoto = Model.Menu.Config != null && Model.Menu.Config.Fields.Any(a => a.Type == MenuFieldType.Image.ToString());
}
<div id="link" class="page" v-cloak>
    <i-form v-model="submitting" ref="form" action="@ViewBag.SubmitUrl" class="am-form-h box box-form" @@success="submitSuccess">
        <input type="hidden" name="Id" v-model="current.Id" />
        <input type="hidden" name="MenuId" value="@Model.Menu.Id" />
        @await Html.PartialAsync("_FormBuilder", new FormBuilderModel(Model.Menu.Config, "link"))
        <div class="am-form-group" style="text-align:center;">
            <a class="am-btn am-btn-default" @@click="reset()" style="margin-right:20px">重置</a>
            <i-button type="submit" skin="success" :loading="submitting" style="padding:8px 40px;">{{current.Id>0?'更新':'添加'}}</i-button>
        </div>
    </i-form>
    <div class="link-list">
        <ul id="link_list">
            <li v-for="item in items" track-by="item" v-on:mouseover="item.showIcon=true" v-on:mouseout="item.showIcon=false" :data-id="item.Id">
                @if (!Model.NoDelete)
                {
                    <a v-show="item.showIcon" @@click="del(item.Id, item)" class="del"><i class="am-icon-trash-o"></i></a>
                }
                @if (showPhoto)
                {
                    <a class="item" @@click="edit(item)">
                        <img v-bind:src="item.Photo" />
                    </a>
                    <p><a :href="item.Url" v-if="item.Url" target="_blank">{{item.Title}}</a><span v-else>{{item.Title}}</span></p>
                }
                else
                {
                    <div class="item am-text-truncate">
                        <i class="am-icon-file" style="font-size:48px" @@click="edit(item)"></i>
                        <p><a :href="item.File" target="_blank">{{item.Title}}</a></p>
                    </div>
                }
            </li>
        </ul>
    </div>
    <div style="clear:left"></div>
</div>
@section script {
    <script type="text/javascript">
    var vm = new Vue({
        el: '#link',
        data: {
            videos: [],
            videoType: '1',
            submitting: false,
            showIcon: false,
            items: null,
            sortable: null,
            current: { Id: 0 }
        },
        methods: {
            reset: function () {
                this.$refs.form.reset();
                this.current = { Id: 0 };
            },
            del: function (id, data) {
                if (confirm("确定删除？")) {
                    var self = this;
                    $.post('@ViewBag.DelUrl', { id: id, menuId: @Model.Menu.Id }, function (result) {
                        if (result.succ) {
                            self.items.remove(data);
                        } else {
                            alert(result.data);
                        }
                    });
                }
            },
            edit: function (item) {
                var self = this;
                $.post('@ViewBag.InfoUrl', { id: item.Id, menuId: @Model.Menu.Id }, function (result) {
                    if (result.succ) {
                        let data = result.data;
                        self.$refs.form.fill(data);
                        self.current = item;
                    } else {
                        alert(result.data);
                    }
                });
            },
            sort: function (ids) {
                var self = this;
                $.post('@ViewBag.SortUrl', { ids: ids, menuId: @Model.Menu.Id }, function (data) {
                    if (data.succ) {
                        self.$Message.success('排序成功！');
                    }
                });
            },
            load: function () {
                var self = this;
                $.post('@ViewBag.DataUrl', { menuId: @Model.Menu.Id, sortId: $('#link_sortid').val(), lang: $('#link_lang').val() }, function (data) {
                    $(data).each(function () {
                        this.showIcon = false;
                    });
                    self.items = data;
                    self.$nextTick(() => {
                        if (!self.sortable) {
                            self.sortable = self.$Utils.sortable(document.getElementById('link_list'), {
                                group: 'group',
                                animation: 100,
                                onSort: function (evt) {
                                    let ids = self.sortable.toArray();
                                    self.sort(ids);
                                }
                            });
                        }
                    });
                });
            },
            submitSuccess(data) {
                this.load();
                this.reset();
                this.$Message.success("添加成功");
            },
            handleEditorChange() {

            },
            editorReady() {

            }
        },
        mounted: function () {
            this.$form = $(this.$refs.form.$el);
            setTimeout(this.reset(), 500);
            this.load();
            var self = this;
            $('#link_sortid, #link_lang').on('change', function () {
                self.load();
            });
        }
    });
    </script>
}